<template>
<div>
<el-row v-show="ShowRow1" class="myCreateOrderrow4" type="flex" justify="center">
    <el-col :span="8" class="myCreateOrdercol4" 
    :style="{border:((myCOtransmit1==index || myCOtransmit2==index)?myCOCCvalueA:myCOCCvalueB)}"
    v-for="(AddData , index) in AddDataRow1" :key="index">
    <div @mouseover="mouseovermyCOCol(index)" @mouseleave="mouseleavemyCOCol" @click="ChooseAddress(index)"
    style="cursor: pointer;">
        <div class="myCreateOrderSplitLine" 
        :style="{opacity:((myCOtransmit1==index || myCOtransmit2==index)?1:0.3)}"></div>
        <div class="myCreateOrdercol4div1">
            <span>{{AddData.name}}</span>
            <span class="myCreateOrdercol4div1Text2" v-show="AddData.isDefault">默认地址</span>
            <span class="myCreateOrdercol4div1Text3" v-show="!AddData.isDefault && myCOtransmit1==index" 
            @click="SetDefaultAddress(AddData.aid)">
                <i class="el-icon-edit">设为默认</i></span>
            <span class="myCreateOrdercol4div1Text4" v-show="myCOtransmit1==index"
            @click="DeleteAddress(AddData.aid)">
                <i class="el-icon-delete-solid">删除</i>
            </span>
        </div>
        <div class="myCreateOrdercol4div2">
            <span>{{PhoneShow[index].slice(0,3)}}*****{{PhoneShow[index].slice(7,10)}}</span>
            <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
        </div>
        <div class="myCreateOrdercol4div3">
            <span class="myCreateOrdercol4div3Text1" :title="AddData.address">
                <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                {{AddData.provinceName+AddData.cityName}}</span>
            <span class="myCreateOrdercol4div3Text2" :title="AddData.address">
                {{AddData.address}}</span>
        </div>
        <div class="myCreateOrderSplitLine2" 
        :style="{opacity:((myCOtransmit1==index || myCOtransmit2==index)?1:0.3)}"></div>
        <img src="../../assets/icon/rightdownChoose.png" class="rightdownChoose" v-show="myCOtransmit2==index">
    </div></el-col>
    <el-col :span="8" class="myCreateOrdercol4" v-show="axiosAddData.length<3"
    :style="{border:((axiosAddData.length==myCOtransmit1 || axiosAddData.length==myCOtransmit2)?myCOCCvalueA:myCOCCvalueB)}">
    <div @mouseover="mouseovermyCOCol(axiosAddData.length)" 
    @mouseleave="mouseleavemyCOCol(axiosAddData.length)" @click="AddAddress"
    class="myaddAddressdiv">
        <img src="../../assets/icon/addAddressB.png" class="myaddAddressicon" v-show="!(myCOtransmit1==axiosAddData.length)">
        <img src="../../assets/icon/addAddressA.png" class="myaddAddressicon" v-show="myCOtransmit1==axiosAddData.length">
        <span class="myaddAddresstext">添加地址</span>
    </div>
    </el-col>
</el-row>
<el-row v-show="ShowRow2" class="myCreateOrderrow4" type="flex" justify="center">
    <el-col :span="8" class="myCreateOrdercol4" 
    :style="{border:((myCOtransmit1==index+3 || myCOtransmit2==index+3)?myCOCCvalueA:myCOCCvalueB)}"
    v-for="(AddData , index) in AddDataRow2" :key="index">
    <div @mouseover="mouseovermyCOCol(index+3)" @mouseleave="mouseleavemyCOCol" @click="ChooseAddress(index+3)"
    style="cursor: pointer;">
        <div class="myCreateOrderSplitLine" :style="{opacity:((myCOtransmit1==index+3 || myCOtransmit2==index+3)?1:0.3)}"></div>
        <div class="myCreateOrdercol4div1">
            <span>{{AddData.name}}</span>
            <span class="myCreateOrdercol4div1Text2" v-show="AddData.isDefault">默认地址</span>
            <span class="myCreateOrdercol4div1Text3" v-show="!AddData.isDefault && myCOtransmit1==index+3" 
            @click="SetDefaultAddress(AddData.aid)">
                <i class="el-icon-edit">设为默认</i></span>
            <span class="myCreateOrdercol4div1Text4" v-show="myCOtransmit1==index+3"
            @click="DeleteAddress(AddData.aid)">
                <i class="el-icon-delete-solid">删除</i>
            </span>
        </div>
        <div class="myCreateOrdercol4div2">
            <span>{{PhoneShow[index].slice(0,3)}}*****{{PhoneShow[index].slice(7,10)}}</span>
            <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
        </div>
        <div class="myCreateOrdercol4div3">
            <span class="myCreateOrdercol4div3Text1" :title="AddData.address">
                <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                {{AddData.provinceName+AddData.cityName}}</span>
            <span class="myCreateOrdercol4div3Text2" :title="AddData.address">
                {{AddData.address}}</span>
        </div>
        <div class="myCreateOrderSplitLine2" :style="{opacity:((myCOtransmit1==index+3 || myCOtransmit2==index+3)?1:0.3)}"></div>
        <img src="../../assets/icon/rightdownChoose.png" class="rightdownChoose" v-show="myCOtransmit2==index+3">
    </div></el-col>
    <el-col :span="8" class="myCreateOrdercol4" v-show="axiosAddData.length<6"
    :style="{border:((axiosAddData.length==myCOtransmit1 || axiosAddData.length==myCOtransmit2)?myCOCCvalueA:myCOCCvalueB)}">
    <div @mouseover="mouseovermyCOCol(axiosAddData.length)" 
    @mouseleave="mouseleavemyCOCol(axiosAddData.length)" @click="AddAddress"
    class="myaddAddressdiv">
        <img src="../../assets/icon/addAddressB.png" class="myaddAddressicon" v-show="!(myCOtransmit1==axiosAddData.length)">
        <img src="../../assets/icon/addAddressA.png" class="myaddAddressicon" v-show="myCOtransmit1==axiosAddData.length">
        <span class="myaddAddresstext">添加地址</span>
    </div>
    </el-col>
</el-row>
<el-row v-show="ShowRow3" class="myCreateOrderrow4" type="flex" justify="center">
    <el-col :span="8" class="myCreateOrdercol4" 
    :style="{border:((myCOtransmit1==index+6 || myCOtransmit2==index+6)?myCOCCvalueA:myCOCCvalueB)}"
    v-for="(AddData , index) in AddDataRow3" :key="index">
    <div @mouseover="mouseovermyCOCol(index+6)" @mouseleave="mouseleavemyCOCol" @click="ChooseAddress(index+6)"
    style="cursor: pointer;">
        <div class="myCreateOrderSplitLine" :style="{opacity:((myCOtransmit1==index+6 || myCOtransmit2==index+6)?1:0.3)}"></div>
        <div class="myCreateOrdercol4div1">
            <span>{{AddData.name}}</span>
            <span class="myCreateOrdercol4div1Text2" v-show="AddData.isDefault">默认地址</span>
            <span class="myCreateOrdercol4div1Text3" v-show="!AddData.isDefault && myCOtransmit1==index+6" 
            @click="SetDefaultAddress(AddData.aid)">
                <i class="el-icon-edit">设为默认</i></span>
            <span class="myCreateOrdercol4div1Text4" v-show="myCOtransmit1==index+6"
            @click="DeleteAddress(AddData.aid)">
                <i class="el-icon-delete-solid">删除</i>
            </span>
        </div>
        <div class="myCreateOrdercol4div2">
            <span>{{PhoneShow[index].slice(0,3)}}*****{{PhoneShow[index].slice(7,10)}}</span>
            <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
        </div>
        <div class="myCreateOrdercol4div3">
            <span class="myCreateOrdercol4div3Text1" :title="AddData.address">
                <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                {{AddData.provinceName+AddData.cityName}}</span>
            <span class="myCreateOrdercol4div3Text2" :title="AddData.address">
                {{AddData.address}}</span>
        </div>
        <div class="myCreateOrderSplitLine2" :style="{opacity:((myCOtransmit1==index+6 || myCOtransmit2==index+6)?1:0.3)}"></div>
        <img src="../../assets/icon/rightdownChoose.png" class="rightdownChoose" v-show="myCOtransmit2==index+6">
    </div></el-col>
    <el-col :span="8" class="myCreateOrdercol4"
    :style="{border:((axiosAddData.length==myCOtransmit1 || axiosAddData.length==myCOtransmit2)?myCOCCvalueA:myCOCCvalueB)}">
    <div @mouseover="mouseovermyCOCol(axiosAddData.length)" 
    @mouseleave="mouseleavemyCOCol(axiosAddData.length)" @click="AddAddress"
    class="myaddAddressdiv">
        <img src="../../assets/icon/addAddressB.png" class="myaddAddressicon" v-show="!(myCOtransmit1==axiosAddData.length)">
        <img src="../../assets/icon/addAddressA.png" class="myaddAddressicon" v-show="myCOtransmit1==axiosAddData.length">
        <span class="myaddAddresstext">添加地址</span>
    </div>
    </el-col>
</el-row>
<!-- 以下为前端专属测试 -->
<!-- <el-row v-show="1" class="myCreateOrderrow4" type="flex" justify="center">
    <el-col :span="8" class="myCreateOrdercol4" 
    :style="{border:((0==myCOtransmit1 || 0==myCOtransmit2)?myCOCCvalueA:myCOCCvalueB)}">
    <div @mouseover="mouseovermyCOCol(0)" @mouseleave="mouseleavemyCOCol(0)" @click="ChooseAddress(0)"
    style="cursor: pointer;">
        <div class="myCreateOrderSplitLine" :style="{opacity:((0==myCOtransmit1 || 0==myCOtransmit2)?1:0.3)}"></div>
        <div class="myCreateOrdercol4div1">
            <span>收货人姓名</span>
            <span class="myCreateOrdercol4div1Text2">默认地址</span>
            <span class="myCreateOrdercol4div1Text3" v-show="myCOtransmit1==0">
                <i class="el-icon-edit">设为默认</i></span>
            <span class="myCreateOrdercol4div1Text4" v-show="myCOtransmit1==0">
                <i class="el-icon-delete-solid">删除</i>
            </span>
        </div>
        <div class="myCreateOrdercol4div2">
            <span>{{testphone.slice(0,3)}}*****{{testphone.slice(7,10)}}</span>
            <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
        </div>
        <div class="myCreateOrdercol4div3">
            <span class="myCreateOrdercol4div3Text1" title="福建省泉州市南安市康美镇康元路8号">
                <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                福建省泉州市</span>
            <span class="myCreateOrdercol4div3Text2" title="福建省泉州市南安市康美镇康元路8号">
                福建省泉州市南安市康美镇康元路8号</span>
        </div>
        <div class="myCreateOrderSplitLine2" :style="{opacity:((0==myCOtransmit1 || 0==myCOtransmit2)?1:0.3)}"></div>
        <img src="../../assets/icon/rightdownChoose.png" class="rightdownChoose" v-show="myCOtransmit2==0">
    </div></el-col>
    <el-col :span="8" class="myCreateOrdercol4" 
    :style="{border:((1==myCOtransmit1 || 1==myCOtransmit2)?myCOCCvalueA:myCOCCvalueB)}">
    <div @mouseover="mouseovermyCOCol(1)" @mouseleave="mouseleavemyCOCol(1)" @click="ChooseAddress(1)"
    style="cursor: pointer;">
        <div class="myCreateOrderSplitLine" :style="{opacity:((1==myCOtransmit1 || 1==myCOtransmit2)?1:0.3)}"></div>
        <div class="myCreateOrdercol4div1">
            <span>收货人姓名</span>
            <span class="myCreateOrdercol4div1Text2">默认地址</span>
            <span class="myCreateOrdercol4div1Text3" v-show="myCOtransmit1==1">
                <i class="el-icon-edit">设为默认</i></span>
            <span class="myCreateOrdercol4div1Text4" v-show="myCOtransmit1==1">
                <i class="el-icon-delete-solid">删除</i>
            </span>
        </div>
        <div class="myCreateOrdercol4div2">
            <span>123*****</span><span>654</span>
            <span class="myCreateOrdercol4div2Text2">周一至周日均可收货</span>
        </div>
        <div class="myCreateOrdercol4div3">
            <span class="myCreateOrdercol4div3Text1" title="福建省泉州市南安市康美镇康元路8号">
                <i class="el-icon-location" style="font-size:150%; opacity: 0.6;"></i>
                福建省泉州市</span>
            <span class="myCreateOrdercol4div3Text2" title="福建省泉州市南安市康美镇康元路8号">
                福建省泉州市南安市康美镇康元路8号</span>
        </div>
        <div class="myCreateOrderSplitLine2" :style="{opacity:((1==myCOtransmit1 || 1==myCOtransmit2)?1:0.3)}"></div>
        <img src="../../assets/icon/rightdownChoose.png" class="rightdownChoose" v-show="myCOtransmit2==1">
    </div></el-col>
    <el-col :span="8" class="myCreateOrdercol4"
    :style="{border:((2==myCOtransmit1 || 2==myCOtransmit2)?myCOCCvalueA:myCOCCvalueB)}">
    <div @mouseover="mouseovermyCOCol(2)" @mouseleave="mouseleavemyCOCol(2)" @click="AddAddress"
    class="myaddAddressdiv">
        <img src="../../assets/icon/addAddressB.png" class="myaddAddressicon" v-show="!(myCOtransmit1==2)">
        <img src="../../assets/icon/addAddressA.png" class="myaddAddressicon" v-show="myCOtransmit1==2">
        <span class="myaddAddresstext">添加地址</span>
    </div>
    </el-col>
</el-row> -->
</div>
</template>

<script>
import axios from 'axios'
import EdAddress from '../userinformationmodified/permainpagerouter/Xiaoedreceivemanagement.vue'
    export default {
        name:'XiaoCOAddress',
        components:{EdAddress},
        data(){
            return{
                axiosAddData:[],
                AddDataRow1:[],
                AddDataRow2:[],
                AddDataRow3:[],
                ShowRow1:0,
                ShowRow2:0,     //测试时候默认row2出现
                ShowRow3:0,
                myCOCCvalueB:"1px solid rgb(179, 179, 179 ,0.2)",
                myCOCCvalueA:"1px solid rgb(179, 179, 179 ,0.8)",
                myCOtransmit1:999,
                myCOtransmit2:0,    //初始化收货地址,默认第一个选中
                rightdownChooseShow:'',
                testphone:'15655556666',
                PhoneShow:[],
            }
        },
        mounted(){
            this.$addr.get(`addresses`).then(
                response=>{
                    console.log('请求获取用户收货地址信息成功了',response)
                    this.axiosAddData=response.data.data
                    //初始化传默认收货地址信息,下方的三个支付信息组件需要此数据
                    this.$bus.$emit('CheckedAddress',this.axiosAddData[0])
                    //初始化传递默认收货地址的aid给创建订单按钮
                    this.$bus.$emit('TransferCheckedAddress',this.axiosAddData[0].aid)
                    for( let i =0 ; i<response.data.data.length ; i++){
                        this.PhoneShow[i]=response.data.data[i].phone
                    }
                    if(response.data.data.length < 3){
                        this.AddDataRow1=response.data.data.slice(0,3)
                        this.ShowRow1=1
                        this.ShowRow2=this.ShowRow3=0
                    }else if(response.data.data.length < 6){
                        this.ShowRow1=this.ShowRow2=1
                        this.ShowRow3=0
                        this.AddDataRow1=response.data.data.slice(0,3)
                        this.AddDataRow2=response.data.data.slice(3,6)
                    }else if(response.data.data.length < 9){
                        this.ShowRow1=this.ShowRow2=this.ShowRow3=1
                        this.AddDataRow1=response.data.data.slice(0,3)
                        this.AddDataRow2=response.data.data.slice(3,6)
                        this.AddDataRow3=response.data.data.slice(6,8)
                        console.log('收货地址最多只能显示8个');
                    }
                },
                error=>{
                    console.log('请求获取用户收货地址信息失败了',error.message)
                }
            )
        },
        methods:{
            mouseovermyCOCol(index){
                this.myCOtransmit1=index
            },
            mouseleavemyCOCol(){
                this.myCOtransmit1=999
            },
            ChooseAddress(index){
                this.myCOtransmit2=index
                this.$bus.$emit('TransferCheckedAddress',this.axiosAddData[index].aid)
            },
            DeleteAddress(val){
                this.$confirm('您确定要删除该收货地址?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$addr.get(`addresses/${val}/delete`).then(
                    response=>{
                        console.log('请求成功了,我删除了该地址',response)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$router.push({name:'xCOrefreshpage'})
                    },error=>{
                        console.log('请求失败了,我没有删除该地址',error)
                    })
                })
            },
            SetDefaultAddress(val){
                this.$addr.get(`addresses/${val}/set_default`).then(
                response=>{
                    console.log('请求成功了,我设置了默认地址',response)
                    this.$message({
                        type: 'success',
                        message: '设置成功!'
                    });
                    this.$router.push({name:'xCOrefreshpage'})
                },error=>{
                    console.log('请求失败了,我没有设置成功',error)
                })
            },
            AddAddress(){
                this.$router.push({name:'xedrecmanage',params:{OldRouter:''}})
                console.log('AddAddress');
            }
        },
        watch:{
            myCOtransmit2(val){         //这里的第一次不会传,所以mounted挂载中获取到就马上传。
                for( let i =0 ; i<this.axiosAddData.length ; i++){
                    if(val == i){
                        this.$bus.$emit('CheckedAddress',this.axiosAddData[i])
                    }
                }
            }
        },
    }
</script>

<style scoped>
.myCreateOrderrow4{
    margin: 0 auto;
    max-width: 900px;
    margin-top: 25px;
    height: 100%;
}
.myCreateOrdercol4{
    margin-left: 10px;
    margin-right: 10px;
    height: 140px;
    border: 1px solid rgb(179, 179, 179 , 0.2);
    background-color: rgb(240, 240, 240);
}
.myCreateOrderSplitLine{
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%);
    background-size: 80px;
    content:'';
    opacity: 0.5;
}
.myCreateOrderSplitLine2{
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background:repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,#1989fa 41%,transparent 0, transparent 50%);
    background-size: 80px;
    content:'';
    margin-top: 25px;
    opacity: 0.5;
}
.rightdownChoose{
    margin-top: -31px;
    float: right;
    height: 28px;
    width: 28px;
}
.myCreateOrdercol4div1{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 16px;
    margin-top: 20px;
    height: 30px;
    border-bottom: 1px dashed rgb(206, 206, 206);
}
.myCreateOrdercol4div1Text2{
    opacity: 0.7;
    float: right;
    font-size: 12px;
}
.myCreateOrdercol4div1Text3{
    float: right;
    font-size: 12px;
    color: rgb(63, 119, 241);
}
.myCreateOrdercol4div1Text3 :hover{
    color: rgb(138, 179, 255);
}
.myCreateOrdercol4div1Text4{
    margin-right: 15px;
    float: right;
    font-size: 12px;
    color: rgb(241, 63, 107);
}
.myCreateOrdercol4div1Text4 :hover{
    color: rgb(255, 158, 158);
}
.myCreateOrdercol4div2{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 13px;
    margin-top: 8px;
}
.myCreateOrdercol4div2Text2{
    font-size: 12px;
    float: right;
}
.myCreateOrdercol4div3{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 12px;
    margin-top: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.myCreateOrdercol4div3Text1{
    font-weight: 600;
}
.myCreateOrdercol4div3Text2{
    margin-left: 8px;
}
.myaddAddressdiv{
    cursor: pointer;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
}
.myaddAddressicon{
    position: absolute;
    margin-top: 45px;
    width: 40px;
    height: 40px;
    margin-left: -20px;
}
.myaddAddresstext{
    position: absolute;
    margin-left: -24px;
    margin-top: 88px;
}
</style>